<template>
  <div class="fillcontain userInfoList">
    <div class="filter-container">
      <el-input placeholder="用户ID" v-model="listQuery.user_id"></el-input>
      <el-select v-model="listQuery.admin_state" placeholder="状态">
        <el-option
          v-for="item in deleteStateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-date-picker
        v-model="daterangeValue"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
        :picker-options="daterangePickerOptions"
      >
      </el-date-picker>

      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="warning" @click="resetFilter">重置</el-button>
    </div>

    <div class="app-container calendar-list-container">
      <p>
        <el-button type="primary" @click="handleBatchOperate('2')"
          >批量删除</el-button
        >
        <el-button type="primary" @click="handleBatchOperate('3')"
          >批量恢复</el-button
        >
        <el-button type="primary" @click="handleBatchOperate('1')"
          >批量处理</el-button
        >
      </p>
      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        ref="sort"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column align="center" label="内部ID">
          <template slot-scope="scope">
            <span class="uid-click" @click="$UserInfoPopUp.install(scope.row.from_uid)">{{ scope.row.from_uid }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="昵称">
          <template slot-scope="scope">
            <span>{{ scope.row.from_nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否机器人">
          <template slot-scope="scope">
            <span>{{ scope.row.from_is_robot ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="被删帖数">
          <template slot-scope="scope">
            <span>{{ scope.row.from_deleted_sum }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="评论内容">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="评论时间">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.admin_state | admin_state }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="最后操作人">
          <template slot-scope="scope">
            <span>{{ scope.row.operator }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-button
              size="small"
              type="danger"
              v-if="row.admin_state == 2"
              @click="handleUpdateItem(row.comment_id,row.trend_id, '3')"
              >恢复</el-button
            >
            <el-button
              size="small"
              type="primary"
              v-else
              @click="handleUpdateItem([row.comment_id],[row.trend_id], '2')"
              >删除</el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="handleBanAccount(row.from_uid)"
              v-if="row.forbidden_state == 2"
              >封号</el-button
            >
            <el-button
              size="small"
              disabled
              v-if="row.forbidden_state == 1"
              >已封号</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    >
    </TablePagination>
    <!--封号-->
    <BanPlayerDialog
      :visible.sync="banPlayerDialogVisible"
      :forbiddenType="0"
      @handleClose="closeBanPlayerDiolog"
      @handleSuccess="getList"
      :uids="banPlayerId"
    ></BanPlayerDialog>
  </div>
</template>

<script>
import DATEPICKER_OPTIONS from "@/config/datepickerOptions";
import BanPlayerDialog from "@/components/BanPlayerDialog";
import TablePagination from "@/components/TablePagination";
import {parseTime} from "@/filters"
export default {
  components: { BanPlayerDialog, TablePagination },
  data() {
    var date=new Date();
    var month=date.getMonth();
    date.setDate(1)
    return {
      list: null,
      total: null,
      listLoading: true,
      accountId: null,
      listQuery: {
        offset: 0,
        limit: 20,
        startTime: parseTime(date,'{y}-{m}-{d}')+" 00:00:00",
        endTime: parseTime(new Date(),'{y}-{m}-{d}')+" 23:59:59",
        admin_state: 0,
      },
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: [new Date(date),new Date()],
      deleteStateOptions: [
        {
          label: "待处理",
          value: 0,
        },
        {
          label: "已处理",
          value: 1,
        },
        {
          label: "已删除",
          value: 2,
        },
        {
          label: "已恢复",
          value: 3,
        },
      ],
      banPlayerDialogVisible: false,
      banPlayerId: "",
      seletedIds: [],
      trendIds: [],
    };
  },
  filters: {
    admin_state(val) {
      let obj = {
        0: "待处理",
        1: "已处理",
        2: "已删除",
        3: "已恢复",
      };
      return obj[val];
    },
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      let params = Object.assign({}, this.listQuery);
      if (params.user_id) {
        params.user_id = this.computedUid(params.user_id);
      }
      this.$get("trend/comment", params).then((resp) => {
        this.list = resp.data.comment_list;
        this.total = resp.data.count;
        this.listLoading = false;
      });
    },
    sortChange: function (column, prop, order) {
      this.listQuery.orderBy = column.prop;
      this.listQuery.orderType = column.order == "ascending" ? "asc" : "desc";
      if (column.prop == "balance") {
        this.listQuery.orderByTotalBalance = "1";
        delete this.listQuery.orderBy;
      } else {
        if (this.listQuery.orderByTotalBalance) {
          delete this.listQuery.orderByTotalBalance;
        }
      }
      this.getList();
    },
    //单个操作
    handleUpdateItem(ids,trend_ids, admin_state) {
      if (!ids.length) {
        this.$message.warning("请选择一条数据");
        return;
      }
      let tips_title = "";
      if (admin_state == "2") {
        tips_title = "确定删除该评论吗";
      } else if (admin_state == "3") {
        tips_title = "确定恢复该评论吗";
      } else if (admin_state == "1") {
        tips_title = "确定批量处理吗";
      }
      this.$alert(tips_title, "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            this.handleRequest(ids,trend_ids, admin_state);
          }
        },
      });
    },
    handleRequest(ids,trend_ids, state) {
      this.$put("trend/comment/admin", {
        comment_id: ids,
        trend_ids: trend_ids,
        admin_state: state,
      })
        .then((resp) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getList();
        })
        .catch((err) => {
          this.$message.error(err.data.error.description);
        });
    },
    //封号
    handleBanAccount(id) {
      this.banPlayerId = id;
      this.banPlayerDialogVisible = true;
    },
    closeBanPlayerDiolog() {
      this.banPlayerDialogVisible = false;
    },
    //批量选择
    handleSelectionChange(val) {
      let ids = [];
      let trend_ids = [];
      val.forEach((item) => {
        ids.push(item.comment_id);
        trend_ids.push(item.trend_id);
      });
      this.seletedIds = ids;
      this.trendIds = trend_ids;
    },
    //批量操作
    handleBatchOperate(type) {
      this.handleUpdateItem(this.seletedIds,this.trendIds, type);
    },
  },
};
</script>
